Wesbos - 배열 조건부 정렬

---

보통 가수 이름이나, 노래 제목 등을 정렬할 때
관사 The, a, an 등은 참조하지 않은 채로 정렬을 한다고 한다.

이를 바탕으로 sort() 등을 활용해 정렬해보자.

---

로직

1. 정렬에 조건 걸기 (/ ^(a | the | an)/)
2. 정렬하기 sort()
3. 정렬된 것 ul에 넣어주기 innerHTML
4. 참조한 관사 (A, The, An)에만 CSS값 주기

---

정렬에 조건 걸기

💡 굉장히 새로운 내용이었다. 내가 제거하고 싶은 부분들을 제거해서 배열을 새로 만든 다음에, 이것을 기준으로 정렬한다는 것이 참신했다.

우선, bands 배열 내에 있는 오브젝트들의 관사를 제거해주는 함수를 만들어보자.

// bandName 인자가 들어오면 -> a, the, an을 제거하고 양 옆 공백을 삭제하여 반환해준다.
function strip(bandName) {
  return bandName.replace(/^(a |the |an )/i, '').trim();
  // 반드시 | 뒤에 공백이 없어야 한다. 공백까지 인식해버림..
}

console.log(strip('the hoonjoo Park'));
// 잘 기능하는지 찍어보기

string.trim()

💡 문자열에서 양 옆에 있는 공백을 제거해준다.

---

정렬하기

💡 기초체력 다지기에서 공부했듯이, sort() 를 사용하면 된다.

// 코드는 항상 최대한 간결하게 !!
const sortedBands = bands.sort((a, b) => (strip(a) > strip(b) ? 1 : -1));

---

정렬한 것 화면에 띄우기

const bandUl = document.querySelector('#bands');

bandUl.innerHTML = sortedBands.map((band) => `<li>${band}</li>`).join('');

---

참조한 관사 (A, The, An)에만 CSS값 주기

💡 Type Ahead 챕터에서 사용했던 정규식 RegExp() 를 활용해봤다.

우선… 새로운 특정 관사가 <span class="hl"></span> 로 replace될 수 있도록 해보자

// map을 통해 새로운 배열을 생성해야 하므로 anThe를 만들어서 써보자
const anThe = sortedBands.map((node) => {
  // 첫 문자 & 대소문자를 구분하는 regex 생성
  const regex = new RegExp(/^(A |The |An )/g);
  // 노드 내에서 regex와 일치하는 (A The An)을 matchRegex에 할당
  const matchRegex = node.match(regex);
  // replace를 통해 해당 regex값이 <span>태그가 붙은 형태로 바뀌어질 수 있도록!
  const newSortedBands = node.replace(
    regex,
    `<span class="hl">${matchRegex}</span>`
  );
  return newSortedBands;
});

---

최종 완성 코드

const bands = [
  'The Plot in You',
  'The Devil Wears Prada',
  'Pierce the Veil',
  'Norma Jean',
  'The Bled',
  'Say Anything',
  'The Midway State',
  'We Came as Romans',
  'Counterparts',
  'Oh, Sleeper',
  'A Skylit Drive',
  'Anywhere But Here',
  'An Old Dog',
];
const bandUl = document.querySelector('#bands');
function strip(bandName) {
  return bandName.replace(/^(a |the |an)/i, '').trim();
}

const sortedBands = bands.sort((a, b) => (strip(a) > strip(b) ? 1 : -1));

const anThe = sortedBands.map((node) => {
  const regex = new RegExp(/^(A |The |An )/g);
  const matchRegex = node.match(regex);
  const newSortedBands = node.replace(
    regex,
    `<span class="hl">${matchRegex}</span>`
  );
  return newSortedBands;
});

const appendBand = anThe.map((band) => `<li>${band}</li>`).join('');
bandUl.innerHTML = appendBand;

---